<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>项目管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加项目</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-form 
			:model="projectaddForm" 
			:rules="projectaddFormRules" ref="projectaddFormRef" label-width="120px">
			
				<el-form-item label="项目名称" >
					<el-input placeholder="请输入项目名称" v-model="projectaddForm.project_name"></el-input>
				</el-form-item>

				<el-form-item label="项目状态" >
					<el-select v-model="projectaddForm.project_status"  placeholder="请选择项目状态" >
						<el-option label="未开始" value="未开始"></el-option>
						<el-option label="已开始" value="已开始"></el-option>
					</el-select>
				</el-form-item>
						
				<el-form-item label="开始日期" >
					<el-col :span="6">
						<el-date-picker 
						type="date" 
						placeholder="请选择日期"
						v-model="projectaddForm.plan_start_time" 
						style="width: 100%;"></el-date-picker>
					</el-col>
				</el-form-item>

				<el-form-item label="预期结束日期" >
					<el-col :span="6">
						<el-date-picker 
						type="date" 
						placeholder="请选择日期" 
						v-model="projectaddForm.plan_end_time" 
						style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2"></el-col>
				</el-form-item>

				<el-form-item label="投资金额" >
					<el-input v-model="projectaddForm.project_cost" placeholder="请输入投资金额"></el-input>
				</el-form-item>

				<el-form-item label="项目经理" >
					<el-input v-model="projectaddForm.project_manager" placeholder="请输入项目经理"></el-input>
				</el-form-item>

				<el-form-item label="项目描述">
					<el-input v-model="projectaddForm.disc" placeholder="请输入项目描述"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="addMessage">立即创建</el-button>
					<el-button type="primary" @click="goback">取消创建</el-button>
				</el-form-item>
			</el-form>

		</el-card>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				//添加表单对象
				projectaddForm: {
					id: '',
					project_name: '',
					project_status: '',
					plan_start_time: '',
					plan_end_time: '',
					project_cost: '',
					project_manager: '',
					disc: '',
					uid: JSON.parse(window.sessionStorage.getItem('user')).id,
				},
				projectaddFormRules: {
					project_name: [{
						required: true,
						message: '请输入项目名称',
						trigger: 'blur'
					}],
					project_cost: [{
						required: true,
						message: '请输入投资金额',
						trigger: 'blur'
					}],
					project_manager: [{
						required: true,
						message: '请输入项目经理',
						trigger: 'blur'
					}],
					disc: [{
						required: true,
						message: '请输入项目描述',
						trigger: 'blur'
					}],
				},
				textarea: '',
			}
		},

		created() {

		},

		methods: {
			// 添加人员 完成后返回人员管理
			addMessage() {
				this.$refs.projectaddFormRef.validate(async valid => {
					if (!valid) return this.$message.error('请填写必要的表单项！')
					// 将this.addsForm进行深拷贝
					console.log(this.addsForm)
					const forms = _.cloneDeep(this.projectaddForm)
					const {
						data: spa
					} = await this.$http.post("addproject", forms)
					if (spa == "ok") {
						this.$message.success('项目创建成功!')
						this.$router.push('/project_list')
					} else {
						this.$message.error('项目创建失败!')
					}

				})
			},
			goback(){
				this.$router.push('/project_list')
			}
		},

	}
</script>

<style lang='less' scoped>
	.el-checkbox {
		margin: 0 8px 0 0 !important;
	}

	.previewImg {
		width: 100%;
	}

	.btnAdd {
		margin-top: 15px
	}
</style>
